<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta content="telephone=no" name="format-detection"/>
	<title>Document</title>
	<script src="lib/zepto.min.js"></script>
	<style>
		.div {
			width: 100px;
			height: 100px;
			line-height: 100px;
			margin: 66px auto;
			background-color: blue;
			position: relative;
		}
		.div input {
			width: 90px;
			height: 90px;
		}
		#test {
			position: absolute;
			visibility: hidden;
		}
		.div.on {
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="div" id="div">
		<input id="test" type="checkbox">
	</div>

<!-- 	table>tr*4>td*3>(div{0+2*$:00-2*$:00}+div.rest) -->


	<script>
		var a = document.getElementById('div');
		console.log(a)
		$(document).ready(function(){
			var $input = $('#test');
			console.log($input);
			$input.on('tap',function() {
				if($input.checked) {
					alert(22)
					// $('.div').addClass('on')
				} else{
					// $('.div').removeClass('on')
				}
			})

		})
	</script>
</body>
</html>